<template>
    <div class="medal-detail ">
        <el-card shadow="never" v-loading="loading">
            <el-form
                inline
                :model="form"
                label-position="right"
                label-suffix=":"
                ref="form"
                :rules="rules"
                @submit.native.prevent="onSave">
                <section class="banner">
                    <el-form-item label="岗位角色选择" prop="label_id">
                        <el-select class="w-64" v-model="form.label_id">
                            <el-option
                                v-for="item in labelList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="medal-title">
                        <el-form-item label="岗位角色标记" prop="mark">
                            <el-input
                                v-model.trim="form.mark"
                                placeholder="请输入"
                                class="input-width w-64"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="课程标题" prop="name">
                            <el-input
                                v-model.trim="form.name"
                                placeholder="请输入"
                                class="input-width w-64"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item label="主要探讨(简介)" class=" w-full" prop="introduction">
                        <el-input
                            rows="6"
                            type="textarea"
                            v-model="form.introduction"
                            placeholder="请输入"
                            class="input-width w-full"></el-input>
                    </el-form-item>
                </section>

                <el-row>
                    <el-col :span="12">
                        <div class="main-item">
                            <div class="main-block">
                                <div class="main-title">课程受众</div>
                                <div class="main-desc">本课程主要面向的从业者画像</div>
                            </div>
                            <div class="main-desc black">
                                <el-form-item label="课程受众描述" class=" w-full" prop="audience">
                                    <el-input
                                        rows="6"
                                        type="textarea"
                                        v-model="form.audience"
                                        placeholder="请输入"
                                        class="input-width w-full"></el-input>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="main-item">
                            <div class="main-desc black">
                                <el-form-item label="工作场景" class=" w-full" required>
                                    <el-button type="primary" @click="courseVisible = true">选择</el-button>
                                    <div>
                                        <div
                                            v-for="item in course_ids"
                                            :key="item.id"
                                            class="py-2 flex items-center courseSelect">
                                            <div>{{ item.name }}</div>
                                            <i
                                                class="el-icon-delete cursor-pointer ml-auto"
                                                @click="selectionTeacher(item, 'course_ids')"></i>
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="main-item">
                            <div class="main-desc black">
                                <el-form-item label="前置学习要求" class="w-full" prop="require">
                                    <el-input
                                        rows="6"
                                        type="textarea"
                                        v-model="form.require"
                                        placeholder="请输入"
                                        class="input-width w-full"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="main-item">
                            <div class="main-desc black">
                                <el-form-item label="课程设计者说" class=" w-full" prop="designer_say">
                                    <el-input
                                        rows="6"
                                        type="textarea"
                                        v-model="form.designer_say"
                                        placeholder="请输入"
                                        class="input-width w-full"></el-input>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="main-item">
                            <el-form-item label="课程设计者&课程讲师" class=" w-full" required>
                                <el-button type="primary" @click="visible = true">选择</el-button>
                                <div>
                                    <div class="teacher-item items-center" v-for="item in teacher_ids" :key="item.id">
                                        <img class="teacher-img" :src="item.img"/>
                                        <div class="teacher-name">{{ item.name }}@{{ item.position }}</div>
                                        <i
                                            class="el-icon-delete cursor-pointer ml-auto"
                                            @click="selectionTeacher(item, 'teacher_ids')"></i>
                                    </div>
                                </div>
                            </el-form-item>
                        </div>

                        <div class="main-item">
                            <el-form-item label="课程价格(原价)" class=" w-full" prop="price">
                                <el-input
                                    type="number"
                                    v-model="form.price"
                                    placeholder="请输入课程价格(原价)"
                                    class="input-width w-full"></el-input>
                            </el-form-item>
                            <el-form-item label="课程价格(现价)" class=" w-full" prop="current_price">
                                <el-input
                                    type="number"
                                    v-model="form.current_price"
                                    placeholder="请输入课程价格(现价)"
                                    class="input-width w-full"></el-input>
                            </el-form-item>
                            <el-form-item label="恢复原价时间" class=" w-full" prop="recovery_at">
                                <el-date-picker
                                    :picker-options="{
                                        disabledDate: (time) => {
                                            return time.getTime() < Date.now() - 8.64e7;
                                        }
                                    }"
                                    value-format="timestamp"
                                    v-model="form.recovery_at"
                                    type="datetime"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </div>

                        <div class="main-item">
                            <el-form-item label="额外服务项目" class=" w-full">
                                <el-select multiple v-model="form.merit_additional_service_ids" class="w-full">
                                    <el-option
                                        v-for="item in serviceList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div class="text-center">
                <el-button type="primary" @click="onSave">保 存</el-button>
                <el-button  @click="onBack">返 回</el-button>
            </div>
        </el-card>

        <el-dialog title="讲师列表" :visible.sync="visible" width="70%">
            <div>
                <el-input v-model="teacherForm.name" class="w-64" placeholder="请输入教师名称"></el-input>
                <el-button type="primary" @click="fetchTeacher">搜索</el-button>
                <el-button @click="teacherReset">重置</el-button>
            </div>
            <el-table :data="teacherList" v-loading="loading">
                <el-table-column label="名称" prop="name"/>
                <el-table-column label="头像">
                    <template slot-scope="{row}">
                        <img class="w-10 h-10" :src="row.img" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{row}">
                        <el-button
                            v-if="!hasItem(row.id, 'teacher_ids')"
                            type="primary"
                            @click="selectionTeacher(row, 'teacher_ids')">选择</el-button>
                        <el-button v-else type="success" @click="selectionTeacher(row, 'teacher_ids')">已选择</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="footer" slot="footer">
                <el-pagination
                    v-if="teacherForm.totalElements > 0"
                    class="center"
                    @size-change="fetchTeacher"
                    @current-change="fetchTeacher"
                    :current-page.sync="teacherForm.page"
                    :page-size="teacherForm.size"
                    :page-sizes="[10, 25, 50]"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="teacherForm.totalElements">
                </el-pagination>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="courseVisible" width="70%">
            <div class="course-content" v-loading="loading">
                <div class="course-item flex flex-wrap">
                    <div :class="[
                        'item',' w-1/4', 'flex', 'items-center',
                        'cursor-pointer', hasItem(item.id, 'course_ids') && 'active'
                    ]"
                        v-for="item in courseList"
                        :key="item.id"
                        @click="selectionTeacher(item, 'course_ids')">
                        {{ item.name }}
                    </div>
                </div>
            </div>

            <div class="w-full flex items-center" slot="title">
                <div class="mr-auto">学习主题列表</div>
                <el-input v-model="courseForm.name" class="w-64" placeholder="请输入学习主题名称"></el-input>
                <el-button type="primary" @click="fetchCourse">搜索</el-button>
                <el-button @click="courseRest">重置</el-button>
                <label class="mr-10"></label>
            </div>

            <div class="footer" slot="footer">
                <el-pagination
                    v-if="courseForm.totalElements > 0"
                    class="center"
                    @size-change="fetchCourse"
                    @current-change="fetchCourse"
                    :current-page.sync="courseForm.page"
                    :page-size.sync="courseForm.size"
                    :page-sizes="[10, 25, 50]"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="courseForm.totalElements">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            visible: false,
            courseVisible: false,

            id: '',
            loading: false,
            form: {
                mark: '',
                name: '',
                introduction: '',
                require: '',
                designer_say: '',
                price: 0,
                current_price: '',
                recovery_at: '',
                merit_additional_service_ids: [],
                teacher_ids: [],
                label_id: '',
                course_ids: [],
                audience: '',
            },

            rules: {
                mark: [
                    { required: true, message: '请输入勋章课标记', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入勋章课名称', trigger: 'blur' },
                ],
                introduction: [
                    { required: true, message: '请输入简介', trigger: 'blur' },
                ],
                designer_say: [
                    { required: true, message: '请输入课程设计者说内容', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请输入课程价格(原价)', trigger: 'blur' },
                ],
                require: [
                    { required: true, message: '请输入前置学习要求', trigger: 'blur' },
                ],
                label_id: [
                    { required: true, message: '请选择', trigger: 'change' },
                ],
                audience: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
            },

            labelList: [],

            teacherForm: {
                page: 1,
                size: 10,
                totalElements: 0,
                name: '',
            },
            teacherList: [],
            teacher_ids: [],

            courseForm: {
                page: 1,
                size: 10,
                name: '',
                totalElements: 0,
            },
            courseList: [],
            course_ids: [],

            serviceList: [],
        };
    },
    methods: {
        onSave() {
            const form = {...this.form};
            if (!this.teacher_ids.length) return $ele.$message.warning('请选择讲师');
            if (!this.course_ids.length) return $ele.$message.warning('请选择工作场景');

            form.teacher_ids = [...new Set(this.teacher_ids.map(e => e.id))];

            form.course_ids = [...new Set(this.course_ids.map(e => e.id))];

            if (form.recovery_at && (form.recovery_at - Date.now() < 5000)) {
                return $ele.$message.warning('恢复原价时间不允许小于当前时间');
            }

            this.$refs.form.validate((valid) => {
                if (!valid) return;
                form.price = +form.price;
                form.current_price = +form.current_price;
                form.recovery_at = form.recovery_at ? Math.floor(form.recovery_at / 1000) : 0;

                const api = this.id ? 'put' : 'post';
                API[api]('merit_course', form).then(() => {
                    $ele.$message.success(`${this.id ? '编辑' : '新增'}成功`);
                    this.onBack();
                });
            });
        },

        getDetail() {
            this.loading = true;
            API.get(`merit_course/${this.id}`).then(res => {
                this.form = {...this.form, ...res};
                this.form.recovery_at = this.form.recovery_at ? this.form.recovery_at * 1000 : '';
                this.course_ids = res.courses;
                this.teacher_ids = res.teacher_responses;
            }).finally(() => this.loading = false);
        },

        onBack() {
            this.$router.back();
        },

        // 各类参数列表数据
        // 各类参数列表数据 start
        fetchLabel() {
            this.loading = true;
            API.get('label/group', {params: {companyId: 0}}).then((res) => {
                this.labelList = res.labels.filter(item => {
                    if (!item.type) return false;
                    return item.type.indexOf('1') > -1;
                });
            }).finally(() => this.loading = false);
        },

        fetchTeacher() {
            this.loading = true;
            API.get('teacher', {params: this.teacherForm}).then((res) => {
                this.teacherList = res.content;
                this.teacherForm.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },

        fetchCourse() {
            this.loading = true;
            API.get('course', {params: this.courseForm}).then((res) => {
                this.courseList = res.content;
                this.courseForm.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },

        fetchService() {
            this.loading = true;
            API.get('merit_additional_service').then((res) => {
                this.serviceList = res;
            }).finally(() => {
                this.loading = false;
            });
        },
        // 各类参数列表数据
        // 各类参数列表数据 end

        selectionTeacher(e, type) {
            let teacherArr = this[type] || [];
            if (!teacherArr.length) {
                teacherArr.push(e);
            } else {
                const teacher = teacherArr.filter(item => item.id !== e.id);
                if (teacherArr.length === teacher.length) {
                    teacherArr.push(e);
                } else teacherArr = teacher;
            }
            this[type] = teacherArr;
        },

        hasItem(id, type) {
            return !!this[type].filter(item => item.id === id).length;
        },

        courseRest() {
            this.courseForm.page = 1;
            this.courseForm.name = '';
            this.fetchCourse();
        },

        teacherReset() {
            this.teacherForm.page = 1;
            this.teacherForm.name = '';
            this.fetchTeacher();
        },
    },
    mounted() {
        this.id = this.$route.params.id;
        if (this.id) this.getDetail();
        this.fetchLabel();
        this.fetchTeacher();
        this.fetchCourse();
        this.fetchService();
    },
};
</script>

<style lang="scss" scoped>
::v-deep {
    .el-form-item__content {
        width: 100%;
    }
}

.banner {
    padding: 20px 30px 13px 30px;
    border-bottom: 1px solid rgb(214, 213, 213);

    .medal-title {
        display: flex;
        align-items: center;
    }
}

.banner-title {
    font-weight: 600;
    width: fit-content;
}

.banner-little {
    margin-bottom: 18px;
    background: rgba($color: #bdbdbd, $alpha: .22);
    padding: 0 15px;
    width: fit-content;
}

.main-item {
    padding: 20px 30px;
    background: white;

    & + .main-item {
        margin-top: 20px;
    }
}

.main-title {
    font-size: 18px;
    font-weight: 600;
    color: #983C5A;
    line-height: 26px;
}

.main-block {
    margin-bottom: 30px;
}

.teacher-item {
    display: flex;
    margin-top: 10px;
    box-shadow: 0 0 3px 1px rgb(240, 240, 240);
    padding: 5px 10px;
}

.teacher-img {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.teacher-content {
    flex-grow: 1;
}

.teacher-name {
    color: #4C5161;
    line-height: 1.2;
}

.teacher-desc {
    color: #A1A5B2;
    line-height: 1.4;
}

.course-item {
    width: calc(100% + 80px);

    .item {
        margin-right: 20px;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 20px;
        box-shadow: 0 0 3px 1px rgb(240, 240, 240);
        border-radius: 4px;

        &:hover {
            box-shadow: 0 0 12px 2px rgb(220, 220, 220);
        }

        &.active {
            background: #409EFF;
            color: white;
        }
    }
}

.courseSelect {
    box-shadow: 0 0 3px 1px rgb(240, 240, 240);
    padding: 5px 10px;
    margin-top: 10px;
}
</style>
